<%--
  Created by IntelliJ IDEA.
  User: lixiangling
  Date: 2018/7/6
  Time: 17:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../../include/layui.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <%@ include file="../../include/head.jsp"%>
    <title>用户列表</title>
</head>
<body layadmin-themealias="default">
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <!-- start 搜索框 -->
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">搜索操作</h2>
                    <div class="layui-colla-content layui-show">
                        <!-- 搜索相关表单及控件 参照`表单`样式 -->
                        <form class="layui-form layui-form-pane" id="search-form">
                            <!-- start 行信息 -->
                            <div class="layui-form-item" style="margin-bottom: 0;">

                                <!-- start 单个元素项 -->
                                <div class="layui-inline">
                                    <%--<label class="layui-form-label">关键字</label>--%>
                                    <div class="layui-input-inline">
                                        <input type="text" name="keyword" lay-verify="title" autocomplete="off" placeholder="请输入关键字" class="layui-input">
                                    </div>
                                </div>
                                <!-- end 单个元素项 -->

                                <!-- start 单个元素项 -->
                                <div class="layui-inline">
                                    <label class="layui-form-label">状态</label>
                                    <div class="layui-input-inline" style="width: 120px;">
                                        <select name="state">
                                            <option value=""></option>
                                            <option value="0">禁用</option>
                                            <option value="1">启用</option>
                                            <option value="2" selected="selected">全部</option>
                                        </select>
                                    </div>
                                </div>
                                <!-- end 单个元素项 -->

                                <!-- start 单个元素项 -->
                                <div class="layui-inline">
                                    <button type="button" class="layui-btn layui-btn-radius btn-min-width" id="search-btn">
                                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                    </button>
                                    <button type="reset" class="layui-btn layui-btn-radius layui-btn-primary btn-min-width">清空</button>
                                </div>
                                <!-- end 单个元素项 -->
                            </div>
                            <!-- end 行信息 -->
                        </form>
                    </div>
                </div>
            </div>
            <!-- end 搜索框 -->
        </div>
        <div class="layui-card-body" >
            <!-- start 表格内容 -->
            <div>
                <!-- start 顶部按钮 -->
                <div class="layui-btn-group btn-group-bottom" btn-listener>
                    <button class="layui-btn layui-btn-orange layui-btn-sm" lay-event="add">
                        <i class="layui-icon">&#xe654;</i>添加
                    </button>
                    <button class="layui-btn layui-btn-red layui-btn-sm" lay-event="delBatch" not-null="1">
                        <i class="layui-icon">&#xe640;</i>删除
                    </button>
                    <button class="layui-btn layui-btn-green layui-btn-sm" lay-event="exportData">
                        <i class="layui-icon">&#xe621;</i>导出
                    </button>
                </div>
                <!-- end 顶部按钮 -->
                <!-- start 表头按钮 -->
                <div class="table-header-btn-group" btn-listener>
                    <a lay-event="turnOn" not-null="1"><i class="layui-icon"><span>&#xe652;</span>启用</i></a>
                    <a lay-event="turnOff" not-null="1"><i class="layui-icon"><span>&#xe651;</span>停用</i></a>
                </div>
                <!-- end 表头按钮 -->
                <table class="layui-hide" id="data-table" lay-filter="data-table"></table>
            </div>

            <!-- 行内操作按钮 -->
            <script type="text/html" id="toolBar">
                <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

                <!-- 这里同样支持 laytpl 语法，如： -->
                <%--{{#  if(d.id > 2){ }}--%>
                <%--<a class="layui-btn layui-btn-xs" lay-event="check">审核</a>--%>
                <%--{{#  } }}--%>
            </script>
            <!-- end 表格内容 -->
        </div>
    </div>
</div>
<script type="text/javascript">

    layui.use(['index', 'element', 'layer', 'table'], function(){
        var table = layui.table;
        //方法级渲染
        table.render({
            elem: '#data-table',
            url:  '${ctx}/user/list',
            cols: [[
                {field:'id', checkbox: true, fixed: true},
                {field:'userName', title: '用户名'},
                {field:'userImageUrl', title: '会员头像'},
                {field:'userGender', title: '会员性别'},
                {field:'userMobilePhone', title: '会员电话'},
                {field:'mobileCarriers', title: '会员电话所属运营商'},
                {field:'userEmail', title: '会员邮箱'},
                {field:'userLevel', title: '会员等级'},
                {field:'registerIp', title: '注册IP'},
                {title: '操作', align:'left', width: 150, toolbar: '#toolBar'}
            ]]
            ,page: true
        });
        // 搜索按钮点事件
        $('#search-btn').on('click', function(){
            table.reload('data-table', {
                where: getParamJson('#search-form'),
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });

        // 行操作事件定义
        var tableEvent = {
            detail: function(obj){
                var data = obj.data; //获得当前行数据
                var tr = obj.tr; //获得当前行 tr 的DOM对象
                openTabsPage('${ctx}/user/detail?id=' + data.userId, '查看用户 - ' + data.userId);
            },
            del: function(obj){
                var data = obj.data; //获得当前行数据
                parent.layer.confirm('真的删除行么', function(index){
                    parent.layer.close(index);
                    //向服务端发送删除指令
                    $.post('${ctx}/user/del', {id: data.userId},function(result){
                        if(result.code == 0){
                            parent.layer.alert('操作成功', {
                                yes: function(index){
                                    parent.layer.close(index);
                                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                }
                            });
                        }else{
                            parent.layer.msg(result.msg || '操作失败');
                        }
                    }, 'json');
                });
            },
            edit: function(obj){
                var data = obj.data; //获得当前行数据
                openTabsPage('${ctx}/user/edit?id=' + data.userId, '编辑用户 - ' + data.userId);
            }
        };

        // 其他操作按钮事件定义
        var otherBtnEvent = {
            getPrimaryKeyParams: function(data){
                var params = '';
                $.each(data, function(i, item){
                    if(i !== 0) params += '&';
                    params += 'id=' + item.userId;
                });
                return params;
            },
            add: function(){
                openTabsPage('${ctx}/user/edit?id=', '添加用户');
            },
            delBatch: function(data, length, isAll){
                var params = otherBtnEvent.getPrimaryKeyParams(data);
                parent.layer.confirm('真的删除选中的行么', function(index){
                    parent.layer.close(index);
                    //向服务端发送删除指令
                    $.post('${ctx}/user/del', params,function(result){
                        if(result.code == 0){
                            parent.layer.alert('操作成功', {
                                yes: function(index){
                                    parent.layer.close(index);
                                    // 更新表格
                                    table.reload('data-table');
                                }
                            });
                        }else{
                            parent.layer.msg(result.msg || '操作失败');
                        }
                    }, 'json');
                });
            },
            exportData: function(data, length, isAll){ //导出
                // 数量限制
                var params = $.param({
                    page: 1,
                    limit: 1000
                }, true);
                // 选中的数据
                var primaryKeys = otherBtnEvent.getPrimaryKeyParams(data);
                // 搜索参数

                // 聚合
                params = params + '&' + primaryKeys;
                window.open('${ctx}/user/export?' + params);
            },
            turnOn: function(data, length, isAll){ // 启用
                var params = otherBtnEvent.getPrimaryKeyParams(data);
                $.post('${ctx}/user/turnOn', params,function(result){
                    if(result.code == 0){
                        parent.layer.msg('操作成功');
                        // 更新表格
                        table.reload('data-table');
                    }else{
                        parent.layer.msg(result.msg || '操作失败');
                    }
                }, 'json');
            },
            turnOff: function(data, length, isAll){ // 停用
                var params = otherBtnEvent.getPrimaryKeyParams(data);
                $.post('${ctx}/user/turnOff', params,function(result){
                    if(result.code == 0){
                        parent.layer.msg('操作成功');
                        // 更新表格
                        table.reload('data-table');
                    }else{
                        parent.layer.msg(result.msg || '操作失败');
                    }
                }, 'json');
            }
        };
        // 初始化监听事件
        initTableEvnet(table, 'data-table', tableEvent, otherBtnEvent);
    });

</script>
</body>
</html>
